import { 
    Map, 
    APILoader, 
    Marker,
    ScaleControl, 
    ToolBarControl, 
    ControlBarControl, 
    Geolocation 
} from '@uiw/react-amap';
import React from 'react';
  

export class MyMap extends React.Component {
  constructor(props) {
    super(props)
    // 父组件可以传递的属性
    // marker_position 有lon、lat属性
    // marker_visiable
    // line_path [[lon,lat], ... ]
    
    // 地图中心
    this.center = [114.35738432483673, 30.608313392810004]
    
    // 接收props
    // 1 标记点位置
    const marker_position = this.props.marker_position || {
        lon: 114.35738432483673,
        lat: 30.608313392810004,
    }
    // 2 标记点是否可见
    const marker_visiable = this.props.marker_visiable || false
    // 3 http轨迹回放轨迹点接收
    const http_line_path = this.props.http_line_path
    // 下行代码在构造函数中只能运行一次
    this.state = { marker_position,marker_visiable,http_line_path }
  }

  // http划线
  http_line_path_draw = ()=>{
      
  }

  // websocket划线

  render(){
    const Demo = () => (
      <div style={{ width: '1000px', height: '600px' }}>
        <Map
        center={ [114.35738432483673, 30.608313392810004]} zoom={18}
        >
            <ScaleControl offset={[16, 30]} position="LB" />
            <ToolBarControl offset={[16, 10]} position="RB" />
            <ControlBarControl offset={[16, 180]} position="RB" />
            <Geolocation
                maximumAge={100000}
                borderRadius="5px"
                position="RB"
                offset={[16, 80]}
                zoomToAccuracy={true}
                showCircle={true}
            />
            <Marker visiable={this.state.marker_visiable} title="起点" position={new AMap.LngLat(this.state.marker_position.lon, this.state.marker_position.lat)} />
        </Map>
      </div>
    );

    return( 
      <APILoader akay="c36700228ab854ce91c7226f41427904">
        <Demo></Demo>
      </APILoader>
    )
  }
}